import React from 'react';
import { Anchor, BackTop, Affix, Icon, Row, Col } from 'antd';
import { enquireScreen } from 'enquire-js';
import Nav1 from '../components/portal/Nav1';
import Footer1 from '../components/portal/Footer1';
import '../components/portal/less/antMotionStyle.less';
import qrCode from '../assets/images/zbt-qr-code.svg';

import { Nav11DataSource, Footer11DataSource } from '../components/portal/data.source';

let isMobile;
enquireScreen(b => {
  isMobile = b;
});

export default class Layout extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isMobile,
    };
  }

  componentDidMount() {
    // 适配手机屏幕;
    enquireScreen(b => {
      this.setState({ isMobile: !!b });
    });
  }

  render() {
    return (
      <div
        className="templates-wrapper"
        ref={d => {
          this.dom = d;
        }}
      >
        <Anchor style={{paddingLeft: 0}}>
          <Nav1
            id="Nav1_1"
            key="Nav1_1"
            dataSource={Nav11DataSource}
            isMobile={this.state.isMobile}
          />
        </Anchor>
        <BackTop />
        {this.props.children}
        <Footer1
          id="Footer1_1"
          key="Footer1_1"
          dataSource={Footer11DataSource}
          isMobile={this.state.isMobile}
        />
        <ZbtAffix />
      </div>
    );
  }
}

class ZbtAffix extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      show: true,
    };
  }

  handleHideClick = (show: boolean) => {
    this.setState({ show });
  };

  render() {
    return (
      <div>
        {this.state.show ? (
          <Affix
            offsetTop={120}
            style={{ position: 'absolute', top: 600, left: 20, background: '#fff' }}
          >
            <Row>
              扫码关注洲博通
              <div style={{ float: 'right' }}>
                <Icon
                  type="close"
                  onClick={() => {
                    this.handleHideClick(false);
                  }}
                />
              </div>
            </Row>
            <Row>
              <img src={qrCode}></img>
            </Row>
          </Affix>
        ) : (
          ''
        )}
      </div>
    );
  }
}
